import React from 'react'
import DeatilCss from './index.module.scss'
import { DetailServer } from '../../api/index'
import back from '../../js/goBack'
import { Link } from 'react-router-dom'
import DetailBanner from '../../components/DetailBanner'
// import '../../js/iconfont/iconfont.css'

class Deatil extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsList: [],
            thisGoods: {},
            headerTop: true,
            nav: [
                {
                    title: "商品",
                    isSelect: true
                },
                {
                    title: "评价",
                    isSelect: false
                },
                {
                    title: "详情",
                    isSelect: false
                },
                {
                    title: "推荐",
                    isSelect: false
                }
            ],
            ejectTitle: "",  //弹框标题
            ejectHide: true,
            num: 1,
            colorChang: false,
            degreeChang: false
        }
    }
    render() {
        return (
            <div id="top" className={DeatilCss.main}>
                {/* 返回顶部 */}
                <div className={this.state.headerTop ? DeatilCss.toTop : DeatilCss.toTop + " " + DeatilCss.toTopShow}>
                    <div>
                        <i className="iconfont icon-icon_phone"></i>
                        <p>App下载</p>
                    </div>
                    <span onClick={() => this.scrollToAnchor('top')}>
                        <i className="iconfont icon-icon_hd"></i>
                    </span>

                </div>
                {/* 头部 */}
                <div className={this.state.headerTop ? DeatilCss.header : DeatilCss.header + " " + DeatilCss.headerHide}>
                    {/* 下载app */}
                    <div className={DeatilCss.headerTop}>
                        <img src="https://images.vsigo.cn/userheadimg/100-100/20204503044367.png" alt="" />
                        <div>
                            <p>欢迎<span>使用APP下单</span></p>
                            <p>更优惠更方便!</p>
                        </div>
                        <div>
                            立即下载
                        </div>
                    </div>
                    <p onClick={this.goBack} className={this.state.headerTop ? DeatilCss.back : DeatilCss.backHide}><i className="iconfont icon-btn_backx"></i></p>
                </div>
                {/* 导航 */}
                <div className={DeatilCss.navBox}>
                    <ul>
                        {
                            this.state.nav.map((item, index) => {
                                return (
                                    <li onClick={this.navChange.bind(this, item.title)} className={item.isSelect ? DeatilCss.navChange : ''} key={index}>{item.title}</li>
                                )
                            })
                        }
                    </ul>
                    <Link to="/">
                        <i className="iconfont icon-icon_home"></i>
                    </Link>

                </div>
                {/* 轮播图 */}
                <div className={DeatilCss.bannerBox}>
                    <div className={DeatilCss.banner}>
                        <DetailBanner swipterImg={this.state.thisGoods.ImageList}></DetailBanner>
                        <Link to="/"> <i className="iconfont icon-icon_home"></i></Link>
                    </div>
                    <div className={DeatilCss.goodsPrice}>
                        <div>
                            <p className={DeatilCss.price}><span>￥</span>{this.state.thisGoods.UnitPrce}</p>
                            <p className={DeatilCss.priceY}><span>￥{this.state.thisGoods.OriginalPrice}</span><span>直降</span></p>
                        </div>
                    </div>
                </div>
                {/* 内容 */}
                <div className={DeatilCss.content}>
                    {/* 商品介绍 */}
                    <div className={DeatilCss.goodsIntroduce}>
                        <p className={DeatilCss.goodsName}>{this.state.thisGoods.ItemName}</p>
                        <p className={DeatilCss.intro}>{this.state.thisGoods.SubTitle}</p>
                        <a href="/">{this.state.thisGoods.Atext}</a>
                        <div className={DeatilCss.problem}>
                            <span><i className="iconfont icon-iocn_sm ask"></i>常见问题</span>
                            <span><i className="iconfont icon-btn_likex t_red"></i>99%好拼</span>
                        </div>
                    </div>

                    {/* 领券 */}
                    <div className={DeatilCss.coupon}>
                        <div onClick={this.ejectShow.bind(this, { par: "领券" })} className={DeatilCss.couponList}>
                            <p>领券</p>
                            <div className={DeatilCss.couponCon}>
                                {
                                    this.state.thisGoods.CouponList &&
                                    this.state.thisGoods.CouponList.map((item, index) => {
                                        return (
                                            <p className={DeatilCss.collar} key={index}>{item.Title}</p>
                                        )
                                    })
                                }
                            </div>
                            <i className=" iconfont icon-btn_backx i "></i>
                        </div>
                        <div onClick={this.ejectShow.bind(this, { par: "促销" })} className={DeatilCss.couponList}>
                            <p>促销</p>
                            {
                                this.state.thisGoods.PromotionList &&
                                <div className={DeatilCss.couponCon}>
                                    <span>券</span>
                                    <p className={DeatilCss.promotion}>{this.state.thisGoods.PromotionList[0].Title}</p>
                                </div>
                            }
                            <i className="iconfont icon-btn_backx i"></i>
                        </div>
                    </div>
                    {/* 商品参数 */}
                    <div className={DeatilCss.parameter}>
                        <div onClick={this.ejectShow.bind(this, { par: "参数" })}>
                            <p>参数</p>
                            <span className={DeatilCss.parCent}>品牌、材质等</span>
                            <i className="iconfont icon-btn_backx i"></i>
                        </div>
                        <div onClick={this.ejectShow.bind(this, { par: "ADD_CART" })}>
                            <p onClick={this.ejectShow.bind(this, { par: "ADD_CART" })}>左眼</p>
                            <span className={DeatilCss.parCent}>请选择</span>
                            <i className="iconfont icon-btn_backx i"></i>
                        </div>
                        <div onClick={this.ejectShow.bind(this, { par: "ADD_CART" })}>
                            <p onClick={this.ejectShow.bind(this, { par: "ADD_CART" })}>右眼</p>
                            <span className={DeatilCss.parCent}>请选择</span>
                            <i className="iconfont icon-btn_backx i"></i>
                        </div>

                        <div className={DeatilCss.problem}>
                            <span><i className="iconfont icon-iocn_sm ask"></i>不知道如何选择度数？</span>
                            <span><i className="iconfont icon-iocn_sm ask"></i>计价单位说明</span>
                        </div>
                    </div>

                    {/* 省心配 */}
                    <div className={DeatilCss.match}>
                        <p className={DeatilCss.zTitle}><i></i>省心配</p>
                        <div className={DeatilCss.matchCont}>

                        </div>
                    </div>

                    {/* 评价 */}
                    <div className={DeatilCss.evaluate}>
                        <div className={DeatilCss.evaluateTitle}>
                            <h5 className={DeatilCss.cTitle}><i></i>评价(111)</h5>
                            <p className={DeatilCss.evaH}>好评度<span>99%</span></p>
                            <p className={DeatilCss.select}>查看全部<i className=" iconfont icon-btn_jrx"></i></p>
                        </div>
                        <div className={DeatilCss.evaCont}>
                            <div className={DeatilCss.evaHade}>
                                <img src="https://m.vsigo.cn/static/img/defaultUserBg.png" alt="" />
                                <div className={DeatilCss.evaHadeTitle}>
                                    <p>{this.state.thisGoods.UserName}</p>
                                    <div>
                                        {
                                            this.state.thisGoods.goodEvaluate &&
                                            this.state.thisGoods.goodEvaluate.map((item, index) => {
                                                return (
                                                    <i key={index} className="iconfont icon-icon_pj_xx"></i>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                            <p className={DeatilCss.evaText}>{this.state.thisGoods.CommentText}</p>
                        </div>
                    </div>

                    {/* 修图 */}
                    <div className={DeatilCss.pictures}>
                        <div className={DeatilCss.evaluateTitle}>
                            <h5 className={DeatilCss.cTitle}><i></i>秀图</h5>

                            <p className={DeatilCss.select}>查看全部<i className=" iconfont icon-btn_jrx"></i></p>
                        </div>
                        <div className={DeatilCss.picCont}>
                            {
                                this.state.thisGoods.ImageInfos &&
                                this.state.thisGoods.ImageInfos.map((item, index) => {
                                    return (
                                        index < 4 &&
                                        <div className={DeatilCss.picImg} key={index}>
                                            <img src={item} alt="" />
                                        </div>
                                    )
                                })
                            }

                        </div>
                    </div>
                    {/* 图文详情 */}
                    <div className={DeatilCss.imgTextDetails}>
                        <p className={DeatilCss.zTitle}><i></i>图文详情</p>
                        <div className={DeatilCss.imgTextDetailsCont}>
                            {
                                this.state.thisGoods.textImg &&
                                this.state.thisGoods.textImg.map((item, index) => {
                                    return (
                                        <img key={index} src={item} alt=""></img>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>

                {/* 弹出框 */}
                <div onClick={this.ejectClose} className={this.state.ejectHide ? DeatilCss.ejectHide : DeatilCss.ejectBox}>
                    {
                        this.state.ejectTitle !== "ADD_CART" ? <div onClick={this.ejectClose.bind(this, { par: "1" })} className={DeatilCss.ejectContentBox}>
                            <p className={DeatilCss.ejectTitle}>{this.state.ejectTitle}</p>
                            <div className={DeatilCss.eject}>
                                {/* 优惠券 */}
                                {
                                    this.state.ejectTitle === "优惠券" ?
                                        <ul className={DeatilCss.ejeCoupon}>
                                            {
                                                this.state.thisGoods.CouponList &&
                                                this.state.thisGoods.CouponList.map((item, index) => {
                                                    return (
                                                        <li key={index}>
                                                            <p>￥<span>{item.Amount}</span>{item.CouponName}</p>
                                                            <p>{item.Title}</p>
                                                            <p>{item.EffectiveTime}</p>
                                                            <div>领券</div>
                                                        </li>
                                                    )
                                                })
                                            }

                                        </ul> : ""
                                }
                                {/* 促销 */}
                                {
                                    this.state.ejectTitle === "促销活动" ?
                                        <ul className={DeatilCss.ejeActivity}>
                                            {
                                                this.state.thisGoods.PromotionList.map((itemc, indexc) => {
                                                    return (
                                                        <li key={indexc}>
                                                            <p><span>{itemc.Tag}</span>{itemc.Title}</p>
                                                            <div className={DeatilCss.ejeActCont}>
                                                                {
                                                                    itemc.GiftList.map((itemcs, indexcs) => {
                                                                        return (
                                                                            <div key={indexcs}>
                                                                                <img src={itemcs.Image} alt="" />
                                                                            X{itemcs.Num}
                                                                            </div>
                                                                        )
                                                                    })
                                                                }
                                                            </div>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul> : ""
                                }
                                {/* 参数 */}
                                {
                                    this.state.ejectTitle === "参数" ?
                                        <ul className={DeatilCss.ejeParameter}>
                                            {
                                                this.state.thisGoods.brandResponse &&
                                                this.state.thisGoods.brandResponse.map((item, index) => {
                                                    return (
                                                        <li key={index}><span>{item.PropertyName}</span><p>{item.PropertyValue}</p></li>
                                                    )
                                                })
                                            }
                                        </ul> : ""
                                }
                            </div>
                            <p onClick={this.ejectClose} className={DeatilCss.isok}>完成</p>
                        </div> :
                            <div onClick={this.ejectClose.bind(this, { par: "1" })} className={DeatilCss.ejectContentBox}>
                                {/* 商品图片 */}
                                <div className={DeatilCss.goodsImg}>
                                    <img src={this.state.thisGoods.ImageList[0]} alt="" />
                                    <p>￥<span>55</span></p>
                                    <i onClick={this.ejectClose} className="iconfont icon-btn_scx"></i>
                                </div>
                                
                                <div className={DeatilCss.ejectContentz}>
                                {/* 颜色选择 */}
                                <div className={DeatilCss.goodsColor}>
                                    <p>颜色</p>
                                    {
                                        this.state.thisGoods.color.length > 0 ?
                                            <ul>
                                                {
                                                    this.state.thisGoods.color.map((item, index) => {
                                                        return (
                                                            <li onClick={this.typeChange.bind(this, { par: "COLOR", title: item.title })} key={index} className={this.state.colorChang === item.title ? DeatilCss.typeChang : ""}>
                                                                {
                                                                    item.img ?
                                                                        <img src={item.img} alt="" /> : ""
                                                                }
                                                                <span>{item.title}</span>
                                                            </li>
                                                        )
                                                    })
                                                }
                                            </ul> : ""
                                    }
                                </div>
                                {/* 度数选择 */}
                                <div className={DeatilCss.degrees}>
                                    <p>度数</p>
                                    {
                                        this.state.thisGoods.degree.length > 0 ?
                                            <div>
                                                <p>0.00</p>
                                                {
                                                    this.state.thisGoods.degree.map((item, index) => {
                                                        return (
                                                            <p onClick={this.typeChange.bind(this, { par: "DEG",title:item })} className={this.state.degreeChang === item ? DeatilCss.typeChang : ""} key={index}>{item}</p>
                                                        )
                                                    })
                                                }
                                            </div> : ""
                                    }

                                </div>
                                </div>
                                <div className={DeatilCss.ejeAddCart}>
                                    <p>数量：</p>
                                    <div><p onClick={this.typeChange.bind(this, { par: "RED" })}>-</p><p>{this.state.num}</p><p onClick={this.typeChange.bind(this, { par: "ADD"})}>+</p></div>
                                    <p className={DeatilCss.addCartBtn}>加入购物车</p>
                                </div>
                            </div>
                    }
                </div>
                {/* 底部 */}
                <div className={DeatilCss.footer}>
                    <div>
                        <a href='/detail'>
                            <i className="iconfont icon-icon_kfx"></i>
                            <p>客服</p>
                        </a>
                        <a href='/detail'>
                            <i className="iconfont icon-icon_sc"></i>
                            <p>收藏</p>
                        </a>
                        <a href='/cart'>
                            <i className="iconfont icon-icon_gwcx"></i>
                            <p>购物车</p>
                        </a>
                    </div>
                    <p onClick={this.ejectShow.bind(this, { par: "ADD_CART" })} className={DeatilCss.addCart}>加入购物车</p>
                </div>
            </div>
        )
    }
    // 规格选择
    typeChange = (e) => {
        switch (e.par) {
            case "COLOR":
                this.setState({
                    colorChang: e.title
                })
                break;
            case "DEG":
                this.setState({
                    degreeChang: e.title
                })
                break;
            case "RED":
                if(this.state.num>1){
                    this.setState({
                        num: this.state.num-1
                    })
                }
               
                break;
            case "ADD":
                this.setState({
                    num: this.state.num+1
                })
                break;
            default:
                break;
        }
    }
    // 弹框显示内容
    ejectShow = (e) => {
        var excEjectTitle = ""
        switch (e.par) {
            case "领券":
                excEjectTitle = '优惠券'
                break;
            case "促销":
                excEjectTitle = '促销活动'
                break;
            case "参数":
                excEjectTitle = '参数'
                break;
            case "ADD_CART":
                excEjectTitle = 'ADD_CART'
                break;


            default:
                break;
        }
        this.setState({
            ejectHide: false,
            ejectTitle: excEjectTitle
        })
    }

    // 关闭弹框
    ejectClose = (e, event) => {
        // console.log(e.par)
        const evs = event || window.event;
        evs.stopPropagation();
        // evs.nativeEvent.stopImmediatePropagation();
        if (e.par !== "1") {
            this.setState({
                ejectHide: true
            })
        }

    }
    // 导航栏选中
    navChange = (e) => {
        this.state.nav.forEach((item) => {
            if (item.title === e) {
                item.isSelect = true
            } else {
                item.isSelect = false
            }

        })
        this.setState({
            nav: this.state.nav
        })
    }
    // 返回上一页
    goBack = () => {
        back()
    }
    // 滚动条监听
    bindHandleScroll = () => {
        // console.log(e)
        // let clientHeight = document.documentElement.clientHeight; //可视区域高度
        let scrollTop = document.documentElement.scrollTop;  //滚动条滚动高度
        // let scrollHeight = document.documentElement.scrollHeight; //滚动内容高度

        // console.log(clientHeight, scrollTop, scrollHeight)
        if (scrollTop < 10) {
            this.setState({
                headerTop: true
            })
        } else if (scrollTop >= 100) {
            this.setState({
                headerTop: false
            })
        }
    } 
    // 返回顶部
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) { anchorElement.scrollIntoView(); }
        }
    }
    componentDidMount = () => {
        // 添加滚动监听
        window.addEventListener('scroll', this.bindHandleScroll)

        // console.log(this.props.match.params.id)
        let thisId = this.props.match.params.id;
        // console.log(thisId)
        // DetailServer.getDetailData()
        DetailServer.getGoodsData("/data/goodsDetail.json", thisId).then((data) => {
            console.log(data.goodsList)
            let excThisGoods = {}
            data.goodsList.forEach((item) => {
                if (thisId === item.name) {
                    excThisGoods = item
                }
            })
            this.setState({
                goodsList: data.goodsList,
                thisGoods: excThisGoods
            }, () => {
                console.log(this.state.thisGoods)
            })
        }).catch((error) => {
            console.log(error)
        })
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
        // 卸载异步操作设置状态
        this.setState = (state, callback) => {
            return;
        }
    }
}
export default Deatil